<template>
  <span>{{ message }}</span>
</template>

<script setup>
import {onMounted, ref, watch} from 'vue';
import { useRoleStore } from "@/pinia/modules/role";

const props = defineProps({
  ids: {
    type: String,
    default: ''
  },
});
const message = ref('');
const roleStore = useRoleStore();
const roleList = ref([]);

const calcName = (ids) => {
  if (!ids) return;

  message.value = '';
  const idArr = ids.split(',');
  const nameArr = [];
  for (let id of idArr) {
    for (let role of roleList.value) {
      if (role.id === id) {
        nameArr.push(role.name);
      }
    }
  }
  message.value = nameArr.join('，');
};

watch(() => props.ids, (data) => {
  calcName(data);
});

onMounted(() => {
  roleStore.getRole().then(roles => {
    roleList.value = roles;
    calcName(props.ids);
  });
});
</script>